<template>
    <section class="oragin-info">
        <el-form :inline="true" :model="organization" class="demo-form-inline origan-info-box" >
            <el-form-item class="info-box-add" >
                <el-button type="primary" size="mini" @click="add">新增</el-button>
            </el-form-item>
            <el-form-item label="类型">
                <el-select size="mini" v-model="organization.type" placeholder="请选择">
                    <el-option size="mini" label="请求方" value="0"></el-option>
                    <el-option size="mini" label="服务方" value="1"></el-option>
                    <el-option size="mini" label="请求/服务方" value=""></el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-input size="mini" v-model="organization.name" placeholder="请输入组织名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <table-diy
            @updata="updata"
            @detail="detail"
            :tableTitle="tableTitle"
            :tableData="tableData"
            :pageTotal="pageTotal"
            :organization="organization"
        >
        </table-diy>

        <el-dialog
          :title="titleDiy"
          :visible.sync="dialogVisible1"
          width="50%"
          class="diy-dialog"
          :append-to-body=true
        >
            <form-diy
                :type="dialog1Type"
                :content="currentPage"
                :organization="organization"
                :objid="detailObjid"
                @disappear="disappear"
                @tableDataSub="tableDataSub"
            >
            </form-diy>
        </el-dialog>
    </section>
</template>

<script>
    import tableDiy from './components/tableDiy'
    import formDiy from './components/formDiy'
    import { organizationDataExchange,
             organizationDataExchangeListSearch,
    } from '../api/data-exchange-api.js'

    export default {
        components:{
            tableDiy,
            formDiy
        },
        data() {
          return {
            currentPage:'yuanData',
            titleDiy:"",
            dialog1Type:'',
            pageTotal: 30,      //数据总条数
            dialogVisible1:false,
            detailObjid: 8,
            organization:{
                type: '',           //0是请求方，1是服务方，既是请求又是服务就不传这个type,type=''
                name: '',           //根据名称查询
                pageNum: 1,         //分页页数，从1开始
                pageSize: 10        //分页条数
            },
            tableTitle:{
                code:"编码",
                oragion:'组织名称',
                type:"类型",
                state:"状态",
            },
            tableData:[
                    {
                        code:"6666",
                        oragion:'测试名称',
                        type:"测试类型",
                        state:"是",
                    },
            ],
          };
        },
        methods: {
            add(){
                this.titleDiy = '新增组织'
                this.dialog1Type = 'add';
                this.dialogVisible1 = true;
            },
            updata(scope){/*更新*/
                this.titleDiy = '更新信息'
                this.dialog1Type = 'update';
                this.dialogVisible1 = true;
                this.detailObjid = scope.row.code
            },
            detail(scope){/*详情*/
                this.titleDiy = '查看详情'
                this.dialog1Type = 'detail';
                this.dialogVisible1 = true;
                this.detailObjid = scope.row.code;
            },
            onSubmit(){
                this.listSearch();
            },
            disappear(val){     //模态框消失
                this.dialogVisible1 = val;
            },
            tableDataSub(val){      //this.tableData列表的更新
                this.tableData = val;
            },
            listSearch(){       //组织信息查询
                organizationDataExchangeListSearch(this.organization).then(res => {
                    this.pageTotal = res.data.data.total
                    const result = res.data.data.list;
                    this.tableData = [];
                    for(let i=0 ; i < result.length; i++ ){
                        let obj = {};
                        let resultType = '';
                        let resultState = '';
                        if(result[i].producerType == 1){
                            resultType = '服务方'
                        }else if(result[i].producerType == 0){
                            resultType = '请求方'
                        }else{
                            resultType = '服务方/请求方'
                        }
                        resultState = result[i].status ? '是' : '否';
                        obj.code = result[i].id;
                        obj.oragion = result[i].name;
                        obj.type = resultType;
                        obj.state = resultState;
                        this.tableData.push(obj);
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        mounted(){
            console.log('组织信息列表');
            this.listSearch();
        }
    };
</script>

<style>
    .oragin-info .el-dialog{
        position: relative;
        margin: 0px 0px 0px 50% !important;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        box-sizing: border-box;
        width: 50%;
        height: 100%;
    }

    .origan-info-box{
        float: right;
    }

    .info-box-add{
        position: absolute;
        left: 20px;
    }

    @keyframes dialog-fade-in {
      0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
      100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }
    @keyframes dialog-fade-out {
      0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }
</style>
